<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    :root {
      --offset: 6px;
    }
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }
    h2 {
      width: 980px;
      font-size: 100px;
      font-family:Arial, Helvetica, sans-serif;
      line-height: 1.06;
      letter-spacing:  -0.02em;
      color: #1d1d1f;
    }
    .mask {
      height: 106px;
      position:relative;
      overflow: hidden;
      /* border: 1px solid red; */
      margin-top: var(--offset);
    }
    .mask span {
      display: block;
      box-sizing: border-box;
      position: absolute;
      top: 100px;
      padding-bottom: var(--offset);
      background-size: 100% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      background-repeat: no-repeat;
    }
    .mask span[data-show] {
      transform:  translateY(-100%);
      transition: .5s transform ease-in-out;
    }
    .mask span[data-up] {
      transform:  translateY(-200%);
      transition: .5s transform ease-in-out;
    }
    .mask span:nth-child(1) {
      background-image: linear-gradient(45deg, #0ecffe 50%,#07a6f1);
    }
    .mask span:nth-child(2) {
      background-image: linear-gradient(45deg, #2ecc71 50%,#27ae60);
    }
    .mask span:nth-child(3) {
      background-image: linear-gradient(45deg,#f1c40f 50%,#f39c12);
    }
  </style>
</head>
<body>
  <h2>Turn your living room into
    <div class="mask">
      <span data-show>a theater.</span>
      <span>a gtm.</span>
      <span>a concert hall.</span>
    </div>
  </h2>
</body>
<script>
  setInterval(function(){
    const show = document.querySelector('span[data-show]')
    const next = show.nextElementSibling || document.querySelector('span:first-child')
    const up = document.querySelector('span[data-up]')

    if(up) {
      up.removeAttribute('data-up')
    }

    show.removeAttribute('data-show')
    show.setAttribute('data-up','')

    next.setAttribute('data-show','')
  },2000)
</script>
</html>